import "scss/index.scss"
import "mapbox-gl/dist/mapbox-gl.css";
import { Map, NavigationControl } from "mapbox-gl";
import { iserverIP } from "@/config/server";




export function init() {
    // new Map({container:"map"})
    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
        " with <span>© <a href='http://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
        " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";

    var map = new Map({
        container: 'map', // container id
        style: {
            "version": 8,
            "sources": {
                "raster-tiles": {
                    "attribution": attribution,
                    "type": "raster",
                    // "tiles": [`${iserverIP}/iserver/services/map-XZQHT/rest/maps/XZQHT/zxyTileImage.png?z={z}&x={x}&y={y}`,
                    "tiles": [`${iserverIP}/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}`
                    ],
                    "tileSize": 256,
                    maxzoom: 18,
                    minzoom: 2,

                },
            },
            "layers": [{
                "id": "simple-tiles",
                "type": "raster",
                "source": "raster-tiles",
                "minzoom": 2,
                "maxzoom": 18
            }]
        },
        center: [121.40767990186544, 31.154538249584817], // starting position
        zoom: 9 // starting zoom
    });

    map.on("click", ev => {
        console.log(ev)
    })
    map.addControl(new NavigationControl(), 'top-left');
}

